<template>
	<view>
		<view class="type-of-service-list">
			<view class="item-service" v-for="(item,index) in massageList" :key="index" >
				<image class="left-img" :src="item.image" mode="widthFix"></image>
				<view class="right-info">
					<view class="service-title">
						<view class="title">
							{{item.title}}
						</view>
						<view class="today-time">
							<view class="titles">最快上门</view>
							<view class="time">30分钟</view>
						</view>
					</view>
					<view class="service-desc">
						<rich-text :nodes="item.content"></rich-text>
					</view>
					<view class="price-num">
						<view class="price">
							<text>{{item.price}}</text>
							<text class="danwei">元/次</text>
						</view>
					</view>
					<view class="vip-hint">
						<image src="https://qiniu-cdn.maeiyun.com/imgs/massage/v1.png" mode=""></image>{{item.vip_price}}元/次
					</view>
					<!-- <view class="vip-hint">
						{{item.vip_price}}元/次
					</view> -->
					<view class="nums">
						<text>已售{{item.buy_num}}</text>
						<text class="lines"></text>
						<text>好评{{(item.high_opinion/item.opinion || 0)*100}}%</text>
					</view>
					<view :class="online?'booknow-btn':'booknow-btn gray'" @click.stop="online?booknow(item):''">立即预约 </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "serviceList",
		props: {
			id: {
				type: Number,
				default: 0
			},
			online:{
				type: Number,
				default: 1
			}
			
		},
		data() {
			return {
				massageList: [],
				
			}
		},
		mounted() {
			this.getMassageList()
		},
		methods: {
			booknow(item){
				this.$emit('bookNow',item)
			},
			toDetail(item) {
				uni.navigateTo({
					url: '/otherpages/massage/massageDetail?id='+item.id+'&tid='+this.id
				})
				
			},
			getMassageList() {
				let that = this
				this.request.httpTokenRequest({
					url: "service/getServiceByTechnician",
					method: "get"
				}, {
					technician_id:this.id
				}).then(res => {
					if (res.code == 0) {
						res.data.data.map(item => {
							that.massageList.push(item)
						})
						that.page++
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			}
		}
	}
</script>

<style lang="scss">
	.item-service {
		background-color: #fff;
		padding: 30rpx 0;
		position: relative;
		border-bottom: 1rpx solid #CECECE;
		display: flex;
		align-items: center;
		.left-img {
			width: 160rpx;
			height: 214rpx;
			flex: 0 0 auto;
			border-radius: 10rpx;
		}
		.right-info {
			margin-left: 31rpx;
			flex-grow: 1;
			.service-title {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #0F0807;
				line-height: 42rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.title{
					width: 50%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.today-time{
					width: 186rpx;
					height: 32rpx;
					margin-left: 26rpx;
					background: url('https://qiniu-cdn.maeiyun.com/imgs/massage/bg.png')no-repeat;
					background-size: 100% 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 12rpx;
					.titles{
						font-size: 20rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
					.time{
						font-size: 20rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #EF5233;
					}
				}
			}

			.service-desc {
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #888889;
				line-height: 30rpx;
				margin-top: 21rpx;
			}
			//
			.vip-hint {
				background: #EDF1FA;
				width: fit-content;
				height: 40rpx;
				font-size: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #3A335F;
				text-align: right;
				padding-right: 16rpx;
				line-height: 40rpx;
				margin: 20rpx 0;
				display: flex;
				align-items: center;
				border-radius: 6rpx;
				margin-left: 10rpx;
				image{
					width: 89rpx;
					height: 40rpx;
					margin-right: 8rpx;
					margin-left: -10rpx;
				}
			}
			.price-num {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 17rpx;

				.price {
					font-size: 34rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #EF5233;
					line-height: 48rpx;

					.danwei {
						font-size: 18rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #EC2700;
						line-height: 25rpx;
					}
				}

				
			}
			.nums {
				font-size: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #858587;
				line-height: 28rpx;
			
				.lines {
					width: 2rpx;
					height: 20rpx;
					background-color: #DBDBDB;
					margin: 0 8rpx;
				}
			}
			.booknow-btn{
				position: absolute;
				width: 158rpx;
				height: 59rpx;
				background: #EF5233;
				border-radius: 30rpx;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 59rpx;
				text-align: center;
				right: 0;
				bottom: 39rpx;
			}
			.gray {
			    background-color: #d2d2d7;
			}
		}
	}
</style>